import React from "react";
import { axiosGet } from "../../axios";
import { url, personalized,mv } from "../../api";
import "./sass/mv-private.scss";
import {observer,inject} from 'mobx-react'
import {withRouter} from 'react-router'

@inject('mv')@observer
 class MvPrivate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mvPrivate: "",
    };
  }
  componentDidMount() {
    this.getMvPrivate();
  }
  //  获取独家放送
  getMvPrivate() {
    axiosGet(url, personalized).then((data) => {
      this.setState({
        mvPrivate: data.result,
      });
    });
  }
      //  设置mv的地址并跳转
      setVideo(item){
        axiosGet(url,mv,`mvid=${item.id}`)
        .then((data)=>{
            this.props.mv.setMvUrl(data.data.brs['480'])
            this.props.mv.setmvDetail(data.data)
        })
        this.props.history.push('/mvDetail')
    }
  render() {
    return (
      <div className="mv-private">
        <h3>独家放送</h3>
        <div className="mv-private-main">
          {this.state.mvPrivate &&
            this.state.mvPrivate.map((item, index) => {
              return (
                <div key={index} className="main-item" onClick={()=>{this.setVideo(item)}}>
                  <img src={item.picUrl} alt=""></img>
                  <p>{item.name}</p>
                </div>
              );
            })}
        </div>
      </div>
    );
  }
}
export default withRouter(MvPrivate)